<template>
  <div>
    <div class="flex justify-center bg-main padding-bottom">
      <div class="width-main">
        <!-- talks -->
        <div>
          <h3><span class="title-about">关于我</span></h3>
          <div class="describe">
            <p class="text-center margin-bottom">和 rinvay 对话中...</p>
            <p
              v-for="(item, index) in talks"
              :key="index"
              :class="item.type ? 'flex-reverse' : ''"
            >
              <span :class="['title-dialogue', item.type ? 'bg-black' : '']">{{
                item.content
              }}</span>
            </p>
          </div>
        </div>
        <!-- Why? -->
        <div class="title-why">为什么写博客</div>
        <div class="describe">
          <p
            v-for="(item, index) in reason"
            :key="index"
            :class="item.type ? 'flex-reverse' : ''"
          >
            <span :class="['title-dialogue', item.type ? 'bg-black' : '']">{{
              item.content
            }}</span>
          </p>
        </div>
        <!-- Contact me -->
        <div class="title-contact">怎么找到我</div>
        <div class="describe">
          <p
            v-for="(item, index) in contact"
            :key="index"
            :class="item.type ? 'flex-reverse' : ''"
          >
            <span :class="['title-dialogue', item.type ? 'bg-black' : '']">{{
              item.content
            }}</span>
          </p>
        </div>
        <!-- My footprint -->
        <div class="title-footprint">我的足迹</div>
        <div class="describe">
          <p
            v-for="(item, index) in footprint"
            :key="index"
            :class="item.type ? 'flex-reverse' : ''"
          >
            <span :class="['title-dialogue', item.type ? 'bg-black' : '']">{{
              item.content
            }}</span>
          </p>
        </div>
      </div>
    </div>
    <Comment></Comment>
  </div>
</template>

<script>
export default {
  data() {
    return {
      footprint: [
        {
          type: 0,
          content: "简书: 树街猫UP",
        },
        {
          type: 0,
          content: "gitee: https://gitee.com/lovestarboy",
        },
      ],
      contact: [
        {
          type: 0,
          content: "可在评论下方留言, 看到会尽快回复的😘！",
        },
        {
          type: 1,
          content: "好的😏",
        },
        {
          type: 0,
          content: "我的邮箱: 2841175342@qq.com",
        },
      ],
      reason: [
        {
          type: 0,
          content:
            "作为一名前端开发者, 在学习的过程中总是想记录一下自己的成长, 可以把一些自己学到的东西以博客的方式记录。",
        },
        {
          type: 0,
          content: "便于自己回顾",
        },
      ],
      talks: [
        {
          type: 0,
          content: "Hi👋",
        },
        {
          type: 0,
          content: "这里是rinvay.",
        },
        {
          type: 0,
          content: "来自四川的一位摩羯座男孩(●'◡'●)~",
        },
        {
          type: 1,
          content: "然后呢?🤔",
        },
        {
          type: 0,
          content: "客官莫急, 且听我慢慢道来😊",
        },
        {
          type: 0,
          content: "本科就读重庆师范大学计算机科学与技术专业.",
        },
        {
          type: 0,
          content:
            "主攻Javascript语言/Node.js, 以及前端相关技术, 框架, 工具. 偶尔倒腾一些后台语言(Go为主)和服务器,",
        },
        {
          type: 0,
          content:
            "喜欢新技术, 想要成为一名优秀的前端工程师(Web Front-end Developer).",
        },
        {
          type: 0,
          content: "喜欢历史, 喜欢听周杰伦的歌.",
        },
        {
          type: 1,
          content: "为什么叫rinvay呢?🤔",
        },
        {
          type: 0,
          content: "这个嘛, 这是我名字的音译哈哈哈！",
        },
        {
          type: 1,
          content: "网名树街猫有什么含义吗?",
        },
        {
          type: 0,
          content: "emmmmm, 当时选择了这个网名是因为喜欢猫...",
        },
        {
          type: 0,
          content: "那么谢谢参观我的weblog",
        },
      ],
    };
  },
};
</script>
<style lang='scss' scoped>
.title-about {
  font-size: 1rem;
  font-weight: 700;
  color: #3c3626;
  box-shadow: 2px 2px 2px #dcd5c3, -1px -1px 1px #ffffff;
  display: inline-block;
  border-radius: 10px;
  text-align: center;
  padding: 0.6rem 2rem;
  box-sizing: border-box;
  // margin: 0 0 0.4rem;
  margin: 40px 0 30px;
  position: relative;
  line-height: 1.3;
  text-shadow: 2px 2px 1px #fff;
  background: #f3efe6;

  &::before {
    content: "🧑";
    font-size: 7px;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
}

.title-why {
  font-size: 1rem;
  font-weight: 700;
  color: #3c3626;
  box-shadow: 2px 2px 2px #dcd5c3, -1px -1px 1px #ffffff;
  display: inline-block;
  border-radius: 10px;
  text-align: center;
  padding: 0.6rem 2rem;
  box-sizing: border-box;
  // margin: 30px 0 40px;
  margin: 40px 0 30px;

  position: relative;
  line-height: 1.3;
  text-shadow: 2px 2px 1px #fff;
  background: #f3efe6;

  &::before {
    content: "❓";
    font-size: 7px;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
}
.title-contact {
  font-size: 1rem;
  font-weight: 700;
  color: #3c3626;
  box-shadow: 2px 2px 2px #dcd5c3, -1px -1px 1px #ffffff;
  display: inline-block;
  border-radius: 10px;
  text-align: center;
  padding: 0.6rem 2rem;
  box-sizing: border-box;
  // margin: 30px 0 40px;
  margin: 40px 0 30px;

  position: relative;
  line-height: 1.3;
  text-shadow: 2px 2px 1px #fff;
  background: #f3efe6;

  &::before {
    content: "🔍";
    font-size: 7px;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
}

.title-footprint {
  font-size: 1rem;
  font-weight: 700;
  color: #3c3626;
  box-shadow: 2px 2px 2px #dcd5c3, -1px -1px 1px #ffffff;
  display: inline-block;
  border-radius: 10px;
  text-align: center;
  padding: 0.6rem 2rem;
  box-sizing: border-box;
  // margin: 30px 0 40px;
  margin: 40px 0 30px;

  position: relative;
  line-height: 1.3;
  text-shadow: 2px 2px 1px #fff;
  background: #f3efe6;

  &::before {
    content: "🚩";
    font-size: 7px;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
}

.describe {
  font-size: 0.9rem;
  color: #333;
  padding: 40px 30px;
  display: inline-block;
  width: 100%;
  background-color: rgba($color: #fff, $alpha: 0.6);
  border-radius: 4px;
  // margin: 0.3rem 0 0;
  box-shadow: inset 1px 1px 1px #e0d8c3, inset -1px -1px 1px #ffffff;
}

.title-dialogue {
  font-size: 0.8rem;
  letter-spacing: 0.1rem;
  font-weight: 700;
  color: #111;
  max-width: 70%;
  box-shadow: 1px 1px 1px #dcd5c3, -1px -1px 1px #ffffff;
  display: inline-block;
  border-radius: 10px;
  padding: 0.6rem 1rem;
  box-sizing: border-box;
  margin: 0 0 0.4rem;
  line-height: 1.8;
  text-shadow: 2px 2px 1px #fff;
  background: #f3efe6;
}

.bg-black {
  color: #fff;
  background-color: #111;
  text-shadow: 2px 2px 1px #111;
}
</style>